/** * Created by wust on 2020/2/22. */
<template>
  <div id="gateway-detail">
    <el-divider content-position="center">设备属性明细</el-divider>
    <div class="my-detail">
      <el-row :gutter="20">
        <el-col :span="3"><label>网关名称:</label></el-col>
        <el-col :span="5">{{ formModel.name }}</el-col>
        <el-col :span="3"><label>MAC地址:</label></el-col>
        <el-col :span="5">{{ formModel.mac }}</el-col>
        <el-col :span="3"><label>设备类型:</label></el-col>
        <el-col :span="5">{{ formModel.typeLabel }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3"><label>设备状态:</label></el-col>
        <el-col :span="5">{{ formModel.statusLabel }}</el-col>
        <el-col :span="3"><label>所属区域:</label></el-col>
        <el-col :span="5">{{ formModel.areaFullName }}</el-col>
        <el-col :span="3"><label>软件版本号:</label></el-col>
        <el-col :span="5">{{ formModel.softwareVersion }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3"><label>硬件版本号:</label></el-col>
        <el-col :span="5">{{ formModel.hardwareVersion }}</el-col>
        <el-col :span="3"><label>备注:</label></el-col>
        <el-col :span="5">{{ formModel.description }}</el-col>
        <el-col :span="3"><label>创建人:</label></el-col>
        <el-col :span="5">{{ formModel.createrName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3"><label>创建时间:</label></el-col>
        <el-col :span="5">{{ formModel.createTime }}</el-col>
        <el-col :span="3"><label>最后更新人:</label></el-col>
        <el-col :span="5">{{ formModel.modifyName }}</el-col>
        <el-col :span="3"><label>最后更新时间:</label></el-col>
        <el-col :span="5">{{ formModel.modifyTime }}</el-col>
      </el-row>
    </div>
    <el-divider content-position="center">网关下属设备</el-divider>
    <div class="echarts1" :style="{ width: '1100px', height: '40vh' }"></div>
  </div>
</template>
<script>
import Vue from 'vue';
import echarts from 'echarts';

export default {
  name: 'demo-detail',
  props: ['selectedModel'],
  data() {
    return {
      formModel: {},
      option1: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
    };
  },
  async mounted () {
    let myChart1 = echarts.init(document.querySelector('.echarts1'))
    myChart1.setOption(this.option1)
  },
  created: function() {
    this.load();
  },
  methods: {
    load: function() {
      Vue.$ajax({
        method: 'get',
        url: Vue.$demoServerURL + '/web/v1/GatewayController/' + this.selectedModel.id
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        } else {
          this.formModel = res.data.obj;
          this.option1.series[0].data.push(res.data.obj.organization)
          let myChart1 = echarts.init(document.querySelector('.echarts1'))
          myChart1.setOption(this.option1)
        }
      });
    }
  }
};
</script>
